<template>
  <div class="body_bgi full bgs_full">
    <big-screen-header :headerName="'' + `${townName}`" />

    <div class="content_box w_full h_full-100 flex_row_around p_10 border_box">
      <!-- 1 -->
      <div class="w_32_5_p h_full flex_column_between">
        <div class="w_full h_49_p chart_box_bgi_1 p_10">
          <data-chart 
            title="存栏统计"
            path=''
            chartType="环状图"
            :chartData="chartData1" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>

        <div class="w_full h_49_p chart_box_bgi_1 p_10">
          <data-chart 
            title="配种数量"
            path=''
            chartType="环状图"
            :chartData="chartData2" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>
      </div>

      <!-- 2 -->
      <div class="w_32_5_p h_full flex_column_between">
        <div class="w_full h_49_p bgs_full chart_box_bgi_1">
          <TownMap :townName="townName" />
        </div>

        <!-- 文字描述 -->
       <div class="w_full h_49_p bgs_full chart_box_bgi_1 p_5 color_fff text_1">
          <div class="w_full flex_row_between p_10">
            <div class="text_1 main_color fw_bold"> 
              {{ townName }}存栏数量：
              <span class="font_number theme_color_orange">
                {{ cunLanCount }} 万
                <!-- <animate-number from="0" :to="cunLanCount" :key="cunLanCount" duration="3000" /> -->
              </span> 
            </div>

            <div class="text_1 main_color fw_bold"> 
              {{ townName }}人口数量：
              <span class="font_number theme_color_green">
                {{ personCount }} 万
                <!-- <animate-number from="0" :to="personCount" :key="personCount" duration="3000" /> -->
              </span> 
            </div>
          </div>
          
          <!-- xxx 镇描述 -->
          <div class="w_full h_full-70 pt_10 text_indent_2 ph_10 overflow_y_auto scroll_box text_justify">{{ content }}</div>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_32_5_p h_full flex_column_between">
        <!-- xxx 镇 所有嘎查村列表 -->
        <div class="w_full h_49_p bgs_full chart_box_bgi_1 p_10">
          <div class="w_full flex_row_between main_color fw_bold text_1">
            <div class="w_50_p">嘎查村名称</div>
            <div class="w_50_p">种公羊存栏数</div>
          </div>

          <div class="w_full h_95_p scroll_box overflow_y_auto">
            <dv-loading v-if="!villageList.length" class="color_fff">数据加载中...</dv-loading>

            <div 
              class="mb_5 w_full h_30 lh_30 text_1 color_fff" 
              v-for="(item, index) in villageList" :key="index" 
            >
              <div class="w_full flex_row_between text_1">
                <div class="w_50_p text_left cursor hover_main_color" @click="goToVillageDetail(index)">
                  {{ item.villageName || '' }}
                </div>
                <div class="w_50_p text_left ls_1">{{ formatSheepCount(item.villageName)}} 万只</div>
              </div>
            </div>
          </div>
        </div>

        <!-- xxx 镇 牧户养殖排行 -->
        <div class="w_full h_49_p bgs_full chart_box_bgi_1 p_10">
          <data-chart 
            title="牧户养殖排行"
            path=''
            chartType="柱状图3"
            :chartData="chartData4" 
            filterText=""
            :filterList="[]"
            :isShowUnit="true"
            :isShowFilterIcon="false"
            :isShowFullIcon="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import defMixin from '@/mixins/def';
import componentsMixin from '@/mixins/components.js'

import { 
  getVillageList, 
  getFarmTownCattleCount,
  getFarmTownBreedCount
} from '@/api/base/base.js'

import { 
  getFarmVillageCattleList,
} from '@/api/town/index.js';

import { getMuHuList } from '@/api/muhu/index.js'

import areaContent from '@/assets/js/areaContent.js'

export default {
  name: 'TownPage',
  mixins: [defMixin, componentsMixin],
  components: { },
  data() {
    return {
      townId: '',
      townName: '',
      level: '',
      content: '',

      cunLanCount: 0,
      personCount: 0,
      animalCount: 0,
      peiZhongCount: 0,

      chartData1: {},
      chartData2: {},
      chartData3: {},
      chartData4: {},

      villageList: [],
      muHuList: [],

      current: 1,

      data2: {},
      data3: {},
    };
  },
  async mounted() {
    let townId = this.$route.params.townId;
    let townName = this.$route.params.townName;

    this.townId = townId;
    this.townName = townName;

    // 显示 镇 简介
    await this.showContent(townName)

    // 获取 xxx 镇的种羊存栏统计 
    await this.getFarmTownCattleCount({ townId })

    // 获取 xxx 镇的种羊配种统计 
    await this.getFarmTownBreedCount({ townId })

    // 获取 xxx镇 所有村 的种羊数量 
    await this.getFarmVillageCattleList({ townId })

    // 获取 镇的牧户
    await this.getMuHuList({ current: this.current, size: 10 })

    this.initChart()
  },
  methods: {
    showContent(name) {
      if (name == '阿拉坦额莫勒镇') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 1
        this.content = areaContent.alteml
      } else if (name == '阿日哈沙特镇') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 2
        this.content = areaContent.arhst
      } else if (name == '呼伦镇') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 3
        this.content = areaContent.hl
      } else if (name == '贝尔苏木') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 4
        this.content = areaContent.be
      } else if (name == '克尔伦苏木') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 5
        this.content = areaContent.kel
      } else if (name == '达赉苏木') {
        this.cunLanCount = 29.5
        this.personCount = 43
        this.current = 6
        this.content = areaContent.dl
      } else if (name == '宝格德乌拉苏木') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 7
        this.content = areaContent.bgdwl
      } else if (name == '敖尔金牧场') {
        this.cunLanCount = 12
        this.personCount = 43
        this.current = 8
        this.content = areaContent.aejmc
      } else {
        this.cunLanCount = 0
        this.personCount = 0
        this.content = ''
        this.current = 1
      } 
    },

    initChart() {
      this.chartData1 = {
        unit: '只',
        data: [
          { name: '种公羊', value: 2334 },
          { name: '种母羊', value: 6434 },
          { name: '羔羊', value: 3435 },
        ]
      }

      this.chartData2 = {
        unit: '只',
        data: [
          { name: '种公羊', value: 1834 },
          { name: '种母羊', value: 1750 },
        ]
      }

      this.chartData4 = {
        unit: '只',
        x: ['阿拉腾陶格斯', '乌宁夫', '照日格图', '达布希拉图', '巴音都仁', '敖特根', '阿拉腾森布尔', '萨日娜'].reverse(),
        y: [396, 320, 300, 270, 250, 220, 220, 213].reverse()
      }
    },

    formatSheepCount(villageName) {
      let count = 0
      if (villageName == '布日德嘎查') {
        count = 6.3
      } else if (villageName == '布日德嘎查') {
        count = 2.4
      } else if (villageName == '阿尔山布拉格嘎查') {
        count = 5.4
      } else if (villageName == '额尔敦乌拉嘎查') {
        count = 5.4
      } else if (villageName == '阿尔山嘎查') {
        count = 1.3
      } else if (villageName == '巴音宝力格嘎查') {
        count = 5.3
      } else if (villageName == '罕乌拉嘎查') {
        count = 5.6
      }

      return count
    },

    // 获取 xxx 镇的 种羊存栏统计
    async getFarmTownCattleCount(params) {
      let res = await getFarmTownCattleCount(params)
      try {
        if (res.code == 200) {

        }
      } catch(err) {
        console.log('获取 xxx 镇的 种羊存栏统计失败 : ', err)
      }
    },

    // 获取 xxx 镇的 种羊配种统计
    async getFarmTownBreedCount(params) {
      let res = await getFarmTownBreedCount(params)
      try {
        if (res.code == 200) {

        }
      } catch(err) {
        console.log('获取 xxx 镇的 种羊配种统计失败 : ', err)
      }
    },

    // 获取 xxx 镇的 说明文字
    async getTownInfo(id) {
      let res = await getTownInfo(id)
      try {
        if (res.code == 200) {
          this.content = res.data.content
        }
      } catch(err) {
        console.log(err)
      }
    },

    // 获取 xxx 镇的 所有村的 存栏数量
    async getFarmVillageCattleList(params) {
      let res = await getFarmVillageCattleList(params)
      try {
        if (res.code == 200) {
          setTimeout(() => { 
            let list = res.data.sort(this.sortDescendingOrder)
            this.villageList = list
          }, 500)
        }
      } catch(err) {
        console.log(err)
      }
    },

    // 降序
    sortDescendingOrder(a, b) {
      return b.totalCount - a.totalCount
    },

    // 获取 乡镇下的 所有 嘎查（村）
    async getVillageList(townId) {
      let res = await getVillageList(townId);
      // debugger
      try {
        if (res.code == 200) {
          setTimeout(() => {
            this.villageList = res.data;
          }, 500)
        }
      }
      catch (err) {
        console.log(err)
      }
    },

    // 获取 xxx 村的 牧户 list
    async getMuHuList(params) {
      let res = await getMuHuList(params)
      try {
        if (res.code == 200) {
          this.muHuList = res.data
        }
      } catch(err) {
        console.log('获取 xxx 镇的牧户列表失败 : ', err)
      }
    },

    // 跳转到牧户详情页
    handleClickMuhu(item) {
      let path = ''
      if (item.isType) {
        path = `/muHuPage1/${item.isType}/${item.id}`
      } else {
        path = `/muHuPage/${this.townId}/${this.townName}/${this.villageId}/${this.villageName}/${item.id}`
      }
      this.goToPage(path)
    },

    // 监听点击 牧户 图表
    clickChart4(params) {
      // this.$router.push({
      //   path: `/muHuPage/${this.townId}/${this.townName}/null/null/null`
      // });
    },

    // 跳转到 嘎查详情页
    goToVillageDetail(index) {
      let villageId = this.villageList[index].villageId;
      let name = this.villageList[index].villageName;
      
      this.$router.push({
        path: `/villagePage/${this.townId}/${this.townName}/${villageId}/${name}`
      });
    }


  }
}
</script>